<div style="position:relative; height:100%" class="reveal-animation">
   <div class="svg-container">
	<svg style="position:relative; height: 100%;width:100%;top:0;left:0;right:0;"
		viewBox="0 0 500 350">
			
<rect x="50" y="20" width="200" height="200"
			style="stroke:cyan;stroke-width:2;fill:transparent" />
<polyline points="50,100 170,100 170,75 250,75 "
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="170" y1="100" x2="170" y2="220"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="50" y1="135" x2="170" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="100" y1="100" x2="100" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="110" y1="100" x2="110" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="120" y1="100" x2="120" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="130" y1="100" x2="130" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" /> 
<line x1="140" y1="100" x2="140" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
<line x1="150" y1="100" x2="150" y2="135"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />

				<rect x="250" y="140" width="200" height="80"
			style="stroke:cyan;stroke-width:2;fill:transparent" />
					
				<polyline points="350,140 350,190 400,190 400,140"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
					<line x1="390" y1="190" x2="390" y2="220"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
					<line x1="400" y1="180" x2="450" y2="180"
			style="stroke:#6699f6;stroke-width:1;fill:transparent" />
					
					<path
			d="M170 200 L160 200 S150 200 150 210 L150 300 S150 310 160 310 L200 310"
			style="stroke:orange;stroke-width:6;fill:transparent" />
					<path d="M270 220 L270 270 S270 280 280 280 L320 280"
			style="stroke:orange;stroke-width:6;fill:transparent" />
					<g font-size="30" font="sans-serif" fill="orange" stroke="none"
			text-anchor="middle">
					<text id="main" x="180" y="300">{{main.temperature.internal.toFixed(1)}}</text>
					<text id="extension" x="300" y="270">{{ext.temperature.internal.toFixed(1)}}</text>
					</g>
					
</svg>
</div>

	<div class="info-layout">
		<div class="display-thin">
			<div class="left" id="marker">

				<div class="left-temperature">
					<div class="internalTemp" style="height:{{(main.temperature.internal-14)*100/11}}%;"></div>
				</div>
				<div class="main-temperature">
					<table style="width: 100%;left:0;">
						<tr>
							<td style="width:5em;"'>Current</td>
							<td>{{main.temperature.internal.toFixed(1)}}</td>
						</tr>
						<tr>
							<td>Target</td>
							<td>{{main.heating.target}}</td>
							<td><button class="left" ng-click="incMainComfortTemp()">+</button></td>
							<td><button class="right" ng-click="decMainComfortTemp()">-</button></td>
						</tr>
						<tr>
							<td>Heating</td>
							<td>{{(main.heating.on==1?'on':'off') + (main.heating.hold>0?'('+main.heating.hold+' min)':'')}}</td>
						</tr>
						<tr>
							<td>Hot Water</td>
							<td>{{(main.hotwater.on==1?'on':'off') + (main.hotwater.boost>0?main.hotwater.boost:'')}}</td>
							<td><button class="left" ng-click="hotWaterOn()">on</button></td>
                                <td><button class="right" ng-click="hotWaterOff()">off</button></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<div class="display-thin">
			<div class="right">


				<div class="main-temperature">
					<table style="width: 100%;right:0;text-align:right;">
						<tr>
							<td></td>
							<td></td>
							<td>{{ext.temperature.internal.toFixed(1)}}</td>
							<td style="width:5em">Current</td>
						</tr>
						<tr>
							<td><button class="left" ng-click="incExtComfortTemp()">+</button></td>
							<td><button class="right" ng-click="decExtComfortTemp()">-</button></td>
							<td>{{ext.heating.target}}</td>
							<td>Target</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td>{{(ext.heating.on==1?'on':'off') + (main.heating.hold>0?'('+main.ext.hold+' min)':'')}}</td>
							<td>Heating</td>
						</tr>

					</table>
				</div>
				<div class="right-temperature">
					<div class="internalTemp"
						style="height:{{(ext.temperature.internal-14)*100/11}}%;"></div>
				</div>

			</div>
		</div>
	</div>
</div>